<template>
  <div>
    <!--  顶部导航栏区域-->
    <v-head></v-head>
<!--下一栏商品-->
    <div class="line1">
      <div :key="i" @click="showGoodsDetail(item.goods_id)" class="line1_good" v-for="(item ,i ) in goodList2">
        <div class="line1_shop_pic">
          <img :src="item.pics[0].pics_big_url" alt="">
        </div>
        <div class="line1_shop_des">
          <div class="line_shop_des_name">{{item.goods_name}}</div>
          <div class="line_shop_des_price">{{item.goods_price | finalPrice}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VHead from '../commom/Topbar'
export default {
  data() {
    return {
      //  是否登陆激活标志
      is_active: false,
      //  商品查询参数
      goodsQueryInfo: {
        query: '',
        pagenum: '1',
        pagesize: '1000'
      },
      //  商品数据绑定
      goodList: [],
      //  获取图片后的商品绑定数据
      goodList1: [],
      //  最后的数据
      goodList2: [],
      //  路由传过来的id参数
      catId: ''
    }
  },
  components: {
    VHead
  },
  created () {
    this.getGoods()
    console.log(this.$route.query.id)
  },
  //  自定义filter函数，用{{ 参数 | 方法() }} 的方式调用
  filters: {
    finalPrice (price) {
      return '¥ ' + price.toFixed(2, 0)
    }
  },
  computed: {},
  methods: {
    //  获取分类商品
    async getGoods() {
      if (this.$route.query.id) {
        this.catId = this.$route.query.id
      }
      console.log(typeof this.catId)
      const { data: res } = await this.$http.get('v2/goods', { params: this.goodsQueryInfo })
      // console.log(res.data)
      if (res.meta.status !== 200) {
        return this.$message.error('获取商品失败！')
        // console.log(res.data)
      }
      // console.log(res.data.goods)
      this.$message.success('获取商品成功！')
      // console.log(res.data.goods)
      console.log('ggggggg')
      console.log(this.catId)
      this.goodList = res.data.goods.filter(n => n.cat_two_id === Number(this.catId))
      // console.log(this.goodList)
      for (const item of this.goodList) {
        // console.log('获取图片')
        const { data: res } = await this.$http.get(`v2/goods/${item.goods_id}`)
        if (res.meta.status !== 200) {
          return this.$message.error('获取商品的图片失败！')
        }
        // this.$message.success('获取商品的图片成功！')
        this.goodList1.push(res.data)
        // this.$forceUpdate()
      }
      if (this.goodList1.length !== 0 && this.goodList.length !== 0) {
        if (this.goodList1.length === this.goodList.length) {
          console.log('输出')
          this.goodList2 = this.goodList1
        }
      }
    },
    //  跳转到注册页面
    toReg() {
      this.$router.push('/shop_register')
    },
    //  跳转到登陆页面
    toLogin() {
      this.$router.push('/shop_login')
    },
    //  跳转到购物车页面
    toCart() {
      this.$router.push('/cart')
    },
    //  跳转到购物车页面
    toMyShop() {
      this.$router.push('/shop')
    },
    //  跳转到商品详情页
    showGoodsDetail(i) {
      this.$router.push({
        path: '/goods_detail',
        query: {
          id: i
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  * {
    margin: 0;
    padding: 0;
    font-family: Microsoft YaHei, serif, tahoma;
    /*background-color: #f1f1f1;*/

    > em {
      font-style: normal;
      color: rgb(255, 0, 54);
      margin: auto;
    }
  }
  /*下一栏商品样式*/
  .line1 {
    margin-left: 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: start;
    overflow: hidden;
    flex-wrap: wrap;
    background: #f1f1f1;
    margin-bottom: 20px;
    width: 1246px;
    height: 624px;

    > .line1_good {
      width: 236px;
      height: 302px;
      background: white;
      display: flex;
      /*flex-direction: row;*/
      flex-wrap: wrap;
      justify-content: center;
      /*align-items: start;*/
      margin: 5px 5px 5px 5px;
      text-align: center;

      > .line1_shop_pic {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 185px;
        height: 185px;
        margin-top: 10px;
        background: #000;

        > img {
          width: 100%;
          height: 100%;
        }
      }

      .line1_shop_des {
        width: 135px;
        height: 58px;
        margin-bottom: 10px;

        > .line_shop_des_name {
          width: 135px;
          height: 40px;
          overflow: hidden;
        }

        > .line_shop_des_price {
          width: 135px;
          height: 18px;
          margin: 10px 0 10px 0;
          color: rgb(255, 0, 54);
          font-size: larger;
        }
      }
    }
  }

</style>
